<template>
  <div class="header">
    <div class="headerTop">
      <img src="../../assets/3king/断货王/back.png" alt="" class="back" @click="doBack">
      <span class="font_d tc">这些都是“断货王”…</span>
      <img src="../../assets/3king/断货王/share.png" alt="" class="share">
    </div>
    <div class="air"></div>
    <div class="eyes">
      <img src="../../assets/3king/断货王/bigImg.png" alt="" class="bigImg">
      <div class="eye-e">
        <router-link to="/shop">
          <div class="e1">
            <img src="../../assets/3king/断货王/listImg1.png" alt="">
            <div class="c1">不易脱妆口红</div>
            <div class="c2">¥59</div>
            <div class="c5"></div>
            <div class="c3">还剩1000件</div>
            <div class="c4">马上去抢</div>
          </div>
        </router-link>
        <div class="e1">
          <img src="../../assets/3king/断货王/listImg2.png" alt="">
          <div class="c1">不易脱妆口红</div>
          <div class="c2">¥59</div>
          <div class="c5"></div>
          <div class="c3">还剩1000件</div>
          <div class="c4">马上去抢</div>
        </div>
        <div class="e1">
          <img src="../../assets/3king/断货王/listImg3.png" alt="">
          <div class="c1">不易脱妆口红</div>
          <div class="c2">¥59</div>
          <div class="c5"></div>
          <div class="c3">还剩1000件</div>
          <div class="c4">马上去抢</div>
        </div>
      </div>
    </div>
    <div class="eyes">
      <img src="../../assets/3king/断货王/bigImg.png" alt="" class="bigImg">
      <div class="eye-e">
        <div class="e1">
          <img src="../../assets/3king/断货王/listImg1.png" alt="">
          <div class="c1">不易脱妆口红</div>
          <div class="c2">¥59</div>
          <div class="c5"></div>
          <div class="c3">还剩1000件</div>
          <div class="c4">马上去抢</div>
        </div>
        <div class="e1">
          <img src="../../assets/3king/断货王/listImg2.png" alt="">
          <div class="c1">不易脱妆口红</div>
          <div class="c2">¥59</div>
          <div class="c5"></div>
          <div class="c3">还剩1000件</div>
          <div class="c4">马上去抢</div>
        </div>
        <div class="e1">
          <img src="../../assets/3king/断货王/listImg3.png" alt="">
          <div class="c1">不易脱妆口红</div>
          <div class="c2">¥59</div>
          <div class="c5"></div>
          <div class="c3">还剩1000件</div>
          <div class="c4">马上去抢</div>
        </div>
      </div>
    </div>
    <div class="eyes">
      <img src="../../assets/3king/断货王/bigImg.png" alt="" class="bigImg">
      <div class="eye-e">
        <div class="e1">
          <img src="../../assets/3king/断货王/listImg1.png" alt="">
          <div class="c1">不易脱妆口红</div>
          <div class="c2">¥59</div>
          <div class="c5"></div>
          <div class="c3">还剩1000件</div>
          <div class="c4">马上去抢</div>
        </div>
        <div class="e1">
          <img src="../../assets/3king/断货王/listImg2.png" alt="">
          <div class="c1">不易脱妆口红</div>
          <div class="c2">¥59</div>
          <div class="c5"></div>
          <div class="c3">还剩1000件</div>
          <div class="c4">马上去抢</div>
        </div>
        <div class="e1">
          <img src="../../assets/3king/断货王/listImg3.png" alt="">
          <div class="c1">不易脱妆口红</div>
          <div class="c2">¥59</div>
          <div class="c5"></div>
          <div class="c3">还剩1000件</div>
          <div class="c4">马上去抢</div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
  export default {
    methods: {
      doBack(){
        this.$router.go(-1)
      }
    }
  }
</script>
<style scoped>
  .headerTop{
    background: #e53e42;
    height: 2.13rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .back{
    width: 0.51rem;
    height: 0.84rem;
    margin-left: 0.44rem;
  }
  .font_d{
    width: 8.1rem;
    font-size: 0.8rem;
    color: #fff
  }
  .eye-e{
    display: flex;
    margin-top: 0.5rem;
  }
  .share{
    height: 0.78rem;
    width: 0.8rem;
    display: inline-block;
    margin-right: 0.44rem;
  }
  .air{
    width: 100%;
    height: 1.33rem;
    background-color: #fff;
  }
  .eyes{
    height: 14.57rem;
    margin-bottom: 0.4rem;
  }
  .bigImg{
    width: 100%;
  }
  .e1{
    text-align: center;
    flex: 1;
  }
  .e1 img{
    width: 1.67rem;
    height: 3.4rem;
  }
  .c1{
    margin-top: 0.44rem;
    font-size: 0.53rem;
  }
  .c2{
    color: red;
    font-size: 0.53rem;
  }
  .c3{
    font-size: 0.4rem;
  }
  .c4{
    width: 3.02rem;
    height: 0.67rem;
    background-color: #e53e42;
    margin: 0 auto;
    border-radius: 0.33rem;
    font-size: 0.44rem;
    color: white;
    line-height: 0.69rem;
  }
  .c5{
    width: 4.4rem;
    height: 0.05rem;
    background: gainsboro;
    margin: 0 auto;
  }
</style>
